<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛-摄影论坛</title>
    <link rel="stylesheet" href="/stylesheets/root.css">
    <link rel="stylesheet" href="/stylesheets_copy/forum-CET4.css">
    <link rel="stylesheet" href="/stylesheets/public-stylesheets.css">
</head>

<body>
    <!-- 顶部栏返回组件 -->
    <div id="top">
        <div id="form">
            摄影社论坛
        </div>
        <a href="#">
            <img src="/images/public_images/return.png" alt="返回">
        </a>
    </div>

    <!-- 蓝色背景 -->
    <div id="blue">
        <!-- 论坛话题 -->
        <p id="title">
            #摄影社
        </p>
        <!-- 论坛关注按钮 -->
        <div id="love">
            <button type="#" style="background-color: RGB(141,39,180)">关注+ ❤</button>
        </div>
    </div>

    <!-- 白色背景 -->
    <div id="white">
        <!-- 动态/关注的数据 -->
        <div id="data">
            <span>1000+</span>
            <span>条动态</span>
            <span>100+</span>
            <span>关注</span>
        </div>
        <!-- 热度显示 -->
        <div id="rank">
            <div class="ranks">学术类No.3 🔥</div>
            <div class="ranks">今日互动10+</div>
        </div>
        <!-- 帖子/活动/干货区 切换栏 -->
        <div id="option">
            <div class="options">帖子</div>
            <div class="options">活动</div>
            <div class="options">干货区</div>
        </div>
    </div>

    <!-- 论坛头像 -->
    <div id="yellow">
        <img src="/images/forum-more/sheying.png" alt="摄影">
    </div>

    <!-- 热门/最新/本校 切换栏 -->
    <div id="switch">
        <div class="switches">热门</div>
        <div class="switches">最新</div>
        <div class="switches">本校</div>
    </div>

    <!-- 论坛帖子内容 -->
    <div id="content">
        <!-- 第一条帖子 -->
        <div class="persons">
            <div class="persons_top">
                <div class="head"> </div>
                <p class="title">
                    (用户昵称)
                </p>
                <p class="location">
                    ♀ (xxx院校 大一)
                </p>
                <div class="attach">
                    关注
                </div>
            </div>
            <!-- 帖子内容 -->
            <div class="persons_content">
                <p>真心话大冒险，互相分享小秘密</p>
                <img src="/images/forums-CET4/truetell.png" alt="图片">
            </div>

            <!-- 帖子底部 -->
            <div class="persons_bottom">
                <div class="col">
                    <div>
                        <img src="/images/forums-CET4/dianzan.png">
                        <span>6</span>
                    </div>
                </div>

                <div class="col">
                    <div>
                        <img src="/images/forums-CET4/pinlun.png">
                        <span>15</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- 第二条帖子 -->
        <div class="persons">
            <div class="persons_top">
                <div class="head"> </div>
                <p class="title">
                    (用户昵称)
                </p>
                <p class="location">
                    ♀ (xxx院校 大一)
                </p>
                <div class="attach">
                    关注
                </div>
            </div>

            <!-- 帖子内容 -->
            <div class="persons_content">
                <p>真心话大冒险，互相分享小秘密</p>
                <img src="/images/forums-CET4/truetell.png" alt="图片">
            </div>

            <!-- 帖子底部 -->
            <div class="persons_bottom">
                <div class="col">
                    <div>
                        <img src="/images/forums-CET4/dianzan.png">
                        <span>6</span>
                    </div>
                </div>

                <div class="col">
                    <div>
                        <img src="/images/forums-CET4/pinlun.png">
                        <span>15</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- 底部栏编辑帖子 -->
        <div id="bottom">
            <div id="input">
                请发布你的第一条帖子吧!
            </div>
            <img src="/images/forums-CET4/bianji.png" alt="编辑"
                style="width: 9vw;position: absolute;right: 6.5vw;top: 1.7vh;">
            <img src="/images/forums-CET4/tianjia.png" alt="添加">
        </div>
</body>

</html>